<template lang="pug">
    div.show-bar2
        ul.bar2
            v-touch(tag="li" v-for='(item,index) in nav' :key='index' @swipeleft="left"
            @swiperight="right")
                a(href="https://m.baidu.com/" v-for="(part) in item.navIcon")
                    div(:class="part.navClass")
                    p {{part.name}}
</template>

<script>
	import $ from 'jquery'

	export default {
		name: "navBar2",
		data() {
			return {
				nav: [
					{//第一层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "attention",
								name: "关注"
							},
							{
								navClass: "news",
								name: "新闻"
							},
							{
								navClass: "novel",
								name: "小说"
							},
							{
								navClass: "video",
								name: "视频"
							},
							{
								navClass: "life",
								name: "糯米"
							},
							{
								navClass: "map",
								name: "地图"
							}
						]
					},
					{//第2层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "TieBa",
								name: "贴吧"
							},
							{
								navClass: "image",
								name: "图片"
							},
							{
								navClass: "website",
								name: "网址"
							},
							{
								navClass: "extend",
								name: "推广"
							},
							{
								navClass: "music",
								name: "音乐"
							},
							{
								navClass: "listen",
								name: "畅听"
							}
						]
					},
					{//第4层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "WaiMai",
								name: "外卖"
							},
						]
					}
				],
				mark: 0
			}
		},
		methods: {
			left() {
				this.mark++;
				if (this.mark > 2) {
					this.mark = 2;
					let bar2 = $('.bar2');
					bar2.animate({left: '-21rem'});
					bar2.animate({left: '-20rem'});
				} else {
					$('.bar2').animate({left: '-=10rem'})
				}
			},
			right() {
				this.mark--;
				if (this.mark < 0) {
					this.mark = 0;
					let bar2 = $('.bar2');
					bar2.animate({left: '0.8rem'});
					bar2.animate({left: '-0.1rem'})
				} else {
					$('.bar2').animate({left: '+=10rem'})
				}
			}
		}
	}
</script>

<style scoped lang="stylus">
    .show-bar2
        overflow-x hidden
        margin-top 0.3rem
        .bar2
            position relative
            list-style-type none
            height: 1.066666666667rem;
            width 30rem
            li
                width: 10rem
                float: left
                a
                    width 0.8rem
                    padding 0 0.426666666666667rem
                    text-decoration none
                    display inline-block
                    font-size 0.34666666667rem
                    div
                        background url("../../assets/img/icons/home/nav.png") no-repeat
                        background-size: 0.586666666667rem auto;
                        width 0.586666666667rem
                        height 0.586666666667rem
                        margin auto
                    .attention
                        background-position: 0 -7.62666666667rem
                    .news
                        background-position: 0 -11.14666666667rem
                    .novel
                        background-position: 0 -9.386666666667rem
                    .video
                        background-position: 0 -12.90666666667rem
                    .life
                        background-position: 0 -11.733333333333rem
                    .map
                        background-position: 0 -8.8rem
                    .TieBa
                        background-position: 0 -13.49333333333rem
                    .image
                        background-position: 0 -8.21333333333333rem
                    .website
                        background-position: 0 -12.32rem
                    .extend
                        background-position: 0 -10.56rem
                    .music
                        background-position: 0 -14.08rem
                    .listen
                        background-position: 0 -14.66666667rem
                    .WaiMai
                        background-position: 0 -15.8666666667rem
                    p
                        color #999
</style>
